<template>
  <div class="ui-zhrtc-page" :style="{padding:closeTools?'10px 0 0 0':'92px 0 0 0' }">
    <div class="ui-zhrtc-toolbar-right">
      <div
        class="ui-button ui-zhrtc-full-btn"
        @click="closeTool"
      >
        <Icon icon="ep:caret-right" />
      </div>
    </div>
    <RTCurveToolbar
      :scale="scaleSettingRef"
      @scale="onScaleChange($event)"
      :showParams="show"
      @show_params="onShowParamsChange($event)"
      :style="{display:closeTools?'none':'block'}"
    />
    <div class="ui-zhrtc-body">
      <div class="ui-zhrtc-vis" ref="containerRef"></div>
      <!-- <div class="ui-zhrtc-runtime"> 参数区建设中... </div> -->
      <div class="ui-zhrtc-runtime">
        <div style=" position: relative; height: 100%; overflow: auto">
          <div style="width: 100%; height: 500px; display: flex; justify-content: space-between">
            <div style="width: 50%">
              <div style="font-size: 14px; font-weight: 600; text-align: center;margin-bottom:10px">水平投影仪</div>
              <div style="display: flex; align-items: center">
                <div style="height: 10px; width: 15px; background: blue; margin-right: 5px"></div>
                <div>实钻轨迹</div>
                <div
                  style="
                    height: 10px;
                    width: 15px;
                    background: green;
                    margin-right: 5px;
                    margin-left: 10px;
                  "
                ></div>
                <div>设计轨迹</div>
              </div>
              <div id="main"></div>
            </div>
            <div style="width: 50%">
              <div style="font-size: 14px; font-weight: 600; text-align: center;margin-bottom:10px">垂直投影仪</div>
              <div style="display: flex; align-items: center">
                <div style="height: 10px; width: 15px; background: blue; margin-right: 5px"></div>
                <div>实钻轨迹</div>
                <div
                  style="
                    height: 10px;
                    width: 15px;
                    background: green;
                    margin-right: 5px;
                    margin-left: 10px;
                  "
                ></div>
                <div>设计轨迹</div>
              </div>
              <div id="main2"></div>
            </div>
          </div>
          <div>
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
              <el-tab-pane label="实钻数据" name="first">
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column prop="deep" label="井深" />
                  <el-table-column prop="wellAngel" label="井斜角" />
                  <el-table-column prop="azimuthAngle" label="方位角" />
                  <el-table-column prop="abscissa" label="横坐标" />
                  <el-table-column prop="yCoordinate" label="纵坐标" />
                  <el-table-column prop="HeavyDeep" label="重深" />
                  <el-table-column prop="addabscissa" label="横坐标增量" />
                  <el-table-column prop="addYCoordinate" label="纵坐标增量" />
                  <el-table-column prop="VisualTranslation" label="视平移" />
                  <el-table-column prop="closureAzimuth" label="闭合方位" />
                  <el-table-column prop="ClosureDistance" label="闭合距" />
                  <el-table-column prop="dataPrecision" label="数据精度" />
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="设计数据" name="second">
                <el-table :data="tableData" style="width: 100%">
                  <el-table-column prop="deep" label="井深" />
                  <el-table-column prop="wellAngel" label="井斜角" />
                  <el-table-column prop="azimuthAngle" label="方位角" />
                  <el-table-column prop="abscissa" label="横坐标" />
                  <el-table-column prop="yCoordinate" label="纵坐标" />
                  <el-table-column prop="HeavyDeep" label="重深" />
                  <el-table-column prop="addabscissa" label="横坐标增量" />
                  <el-table-column prop="addYCoordinate" label="纵坐标增量" />
                  <el-table-column prop="VisualTranslation" label="视平移" />
                  <el-table-column prop="closureAzimuth" label="闭合方位" />
                  <el-table-column prop="ClosureDistance" label="闭合距" />
                  <el-table-column prop="dataPrecision" label="数据精度" />
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { DataType,WellLogModel, WellLogRenderer } from 'well-log-vis'
import { bind } from 'neurons'
import RTCurveToolbar from '../toolbar.vue'
import { welllog } from './test/test-welllog'
import { IBindingRef } from 'neurons/binding/common/interfaces'
import { IWhereCondition } from 'well-log-vis/service/api'
import { IDataSet, ITable } from 'well-log-vis/model/interfaces'
import { testDataSet, testTable } from './test/test-table'
import { RtMaintainApi } from '@/api/base/rtmaintain'
import { IPlottingScale } from 'well-log-vis/entity/welllog'
const closeTools = ref(false)
const { t } = useI18n()
const containerRef = ref<ElRef<HTMLElement>>()
const defaultScale = {
  // 时间比例尺（1cm:m）：每一厘米多少分钟
  timeScale: 3,
  // 时间刻度（分钟）：每个刻度多少分钟
  timeInterval: 10,
  // 距离比例尺(1mm:?)：每一毫米多少物理距离
  distanceScale: 500,
  // 距离刻度(?) - 每个刻度多少物理距离，该单位不确定，应与距离字段单位相同
  distanceInterval: 15000,
}
const scaleSettingRef = ref<IPlottingScale>(defaultScale);
const defaultViewSetting = {
  fitWindow: false,
  autoRefresh: false,
  mouseCrosshair: true,
  mouseTooltip: true,
  showHeader: false,
  autoScrolling: false,
}
const viewSettingRef = ref(defaultViewSetting);

let wellLogRef: IBindingRef<any>
let wellLogModel: WellLogModel;
let defaultWellLogScale: IPlottingScale;

import * as echarts from 'echarts'
import 'echarts-gl'
import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  activeName.value = tab.props.name as string;
  if (activeName.value === 'first') {
    color.value = 'blue'
    getList()
  } else {
    color.value = 'green'
    getList()
  }
}
const tableData = ref([
  {
    deep: 0,
    wellAngel: 0,
    azimuthAngle: 0,
    abscissa: 0,
    yCoordinate: 0,
    HeavyDeep: 0,
    addabscissa: 0,
    addYCoordinate: 0,
    VisualTranslation: 0,
    closureAzimuth: 0,
    ClosureDistance: 0,
    dataPrecision: 0
  },
  {
    deep: 71.23,
    wellAngel: 0.4,
    azimuthAngle: 140.13,
    abscissa: 0.13,
    yCoordinate: -0.21,
    HeavyDeep: 71.23,
    addabscissa: 0.13,
    addYCoordinate: 0.21,
    VisualTranslation: 0.21,
    closureAzimuth: 148.24,
    ClosureDistance: 0.25,
    dataPrecision: 0.17
  },
  {
    deep: 0.26,
    wellAngel: 0.1,
    azimuthAngle: 300.68,
    abscissa: 0.08,
    yCoordinate: -0.28,
    HeavyDeep: 0.26,
    addabscissa: 0,
    addYCoordinate: 0,
    VisualTranslation: 0,
    closureAzimuth: 0,
    ClosureDistance: 0,
    dataPrecision: 0
  },
  {
    deep: 0,
    wellAngel: 0,
    azimuthAngle: 0,
    abscissa: 0,
    yCoordinate: 0,
    HeavyDeep: 0,
    addabscissa: 0,
    addYCoordinate: 0,
    VisualTranslation: 0,
    closureAzimuth: 0,
    ClosureDistance: 0,
    dataPrecision: 0
  },
  {
    deep: 0,
    wellAngel: 0,
    azimuthAngle: 0,
    abscissa: 0,
    yCoordinate: 0,
    HeavyDeep: 0,
    addabscissa: 0,
    addYCoordinate: 0,
    VisualTranslation: 0,
    closureAzimuth: 0,
    ClosureDistance: 0,
    dataPrecision: 0
  },
  {
    deep: 0,
    wellAngel: 0,
    azimuthAngle: 0,
    abscissa: 0,
    yCoordinate: 0,
    HeavyDeep: 0,
    addabscissa: 0,
    addYCoordinate: 0,
    VisualTranslation: 0,
    closureAzimuth: 0,
    ClosureDistance: 0,
    dataPrecision: 0
  },
  {
    deep: 0,
    wellAngel: 0,
    azimuthAngle: 0,
    abscissa: 0,
    yCoordinate: 0,
    HeavyDeep: 0,
    addabscissa: 0,
    addYCoordinate: 0,
    VisualTranslation: 0,
    closureAzimuth: 0,
    ClosureDistance: 0,
    dataPrecision: 0
  },
  {
    deep: 0,
    wellAngel: 0,
    azimuthAngle: 0,
    abscissa: 0,
    yCoordinate: 0,
    HeavyDeep: 0,
    addabscissa: 0,
    addYCoordinate: 0,
    VisualTranslation: 0,
    closureAzimuth: 0,
    ClosureDistance: 0,
    dataPrecision: 0
  },
  {
    deep: 0,
    wellAngel: 0,
    azimuthAngle: 0,
    abscissa: 0,
    yCoordinate: 0,
    HeavyDeep: 0,
    addabscissa: 0,
    addYCoordinate: 0,
    VisualTranslation: 0,
    closureAzimuth: 0,
    ClosureDistance: 0,
    dataPrecision: 0
  },
  {
    deep: 0,
    wellAngel: 0,
    azimuthAngle: 0,
    abscissa: 0,
    yCoordinate: 0,
    HeavyDeep: 0,
    addabscissa: 0,
    addYCoordinate: 0,
    VisualTranslation: 0,
    closureAzimuth: 0,
    ClosureDistance: 0,
    dataPrecision: 0
  }
])
const color = ref('blue')
const getList = () => {
  console.log(color.value)
  var chartDom = document.getElementById('main')
  var myChart = echarts.init(chartDom)
  var option
  option = {
    xAxis: {
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed', // 设置为虚线
          color: '#ddd' // 网格线颜色
        }
      },
      axisTick: { show: false } //不展示坐标轴刻度
    },
    yAxis: {
      axisLine: {
        show: false
      },
      // inverse: true,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed', // 设置为虚线
          color: '#ddd' // 网格线颜色
        }
      },
      axisTick: { show: false } //不展示坐标轴刻度
    },
    series: [
      {
        data: [
          [-900, 110],
          [-850, -10],
          [-800, -5],
          [-700, -25],
          [-600, -20],
          [-500, -15],
          [-400, -15],
          [-300, -10],
          [-200, -5],
          [-100, -1],
          [0, 0]
        ],
        type: 'line',
        smooth: 'true',
        lineStyle: {
          color: color.value,
          width: 2,
          type: 'solid'
        },
        markPoint: {
          data: [
            {
              name: '开始点',
              coord: [0, 0],
              symbol: 'rect', // 标记形状为矩形
              symbolSize: [10, 10], // 矩形大小
              label: {
                show: false // 不显示标签
              },
              itemStyle: {
                color: 'red' // 背景方块颜色
              }
            }
          ]
        }
      }
    ]
  }

  // 使用刚指定的配置项和数据显示图表。
  option && myChart.setOption(option)

  var chartDom2 = document.getElementById('main2')
  var myChart2 = echarts.init(chartDom2)
  var option2
  option2 = {
    xAxis: {
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed', // 设置为虚线
          color: '#ddd' // 网格线颜色
        }
      },
      axisTick: { show: false } //不展示坐标轴刻度
    },
    yAxis: {
      axisLine: {
        show: false
      },
      inverse: true,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed', // 设置为虚线
          color: '#ddd' // 网格线颜色
        }
      },
      axisTick: { show: false } //不展示坐标轴刻度
    },
    series: [
      {
        data: [
          [0, 0],
          [0, 450],
          [100, 900],
          [200, 1200],
          [300, 1800],
          [400, 2200],
          [500, 2800],
          [600, 3100],
          [700, 3500],
          [800, 3900],
          [900, 4200]
        ],
        type: 'line',
        smooth: 'true',
        lineStyle: {
          color: color.value,
          width: 2,
          type: 'solid'
        },
        markPoint: {
          data: [
            {
              name: '开始点',
              coord: [0, 0],
              symbol: 'rect', // 标记形状为矩形
              symbolSize: [10, 10], // 矩形大小
              label: {
                show: false // 不显示标签
              },
              itemStyle: {
                color: 'red' // 背景方块颜色
              }
            }
          ]
        }
      }
    ]
  }

  // 使用刚指定的配置项和数据显示图表。
  option2 && myChart2.setOption(option2)
}
onMounted(() => {
  getList()
  const container = unref(containerRef) as HTMLElement
  const model = (wellLogModel = WellLogModel.create(welllog))
  scaleSettingRef.value = model.get('settings.plottingScale') || defaultScale;
  const modelSetting: IWellLogSetting = model.get('settings');
  viewSettingRef.value = {
    fitWindow: !!modelSetting.fitWindow,
    autoRefresh: !!modelSetting['autoRefresh'],
    mouseCrosshair: !modelSetting.hideMouseCrosshair,
    mouseTooltip: !modelSetting.hideMouseTooltip,
    showHeader: !!modelSetting['showHeader'],
    autoScrolling: !!modelSetting['autoScrolling'],
  }
  defaultWellLogScale = {...scaleSettingRef.value};
  wellLogRef = bind(
    `
    <ne-wlr [wellLog]="wellLog" [api]="api"></ne-wlr>
  `,
    {
      container: container,
      state: {
        wellLog: model,
        api: {
          table: {
            fetch: (id: any): Promise<ITable | null> => {
              if (testTable.id == id) return Promise.resolve(testTable)
              return Promise.resolve(null)
            },
            query: (
              tableId,
              columns: String[],
              wheres: IWhereCondition[]
            ): Promise<IDataSet | null> => {
               if (testTable.id == tableId) {
              return RtMaintainApi.getChildByCreateTime(welllog.id, new Date(0), new Date()).then(result => {
                // 1. 需要完整的日期类型
                result = (result || []).map(obj => {
                  // 调整p1 p2的数据类型
                  const p1 = obj.p1.split('-');
                  const p2 = obj.p2.split(':');
                  const date = new Date(parseInt(p1[0]), parseInt(p1[1]) - 1, parseInt(p1[2]), parseInt(p2[0]), parseInt(p2[1]), parseInt(p2[2]));
                  // console.log(obj.p1 + ' ' + obj.p2, formatter.dateFormat(date, {format: 'yyyy-MM-dd hh:mm:ss'}));
                  obj.p1 = obj.p2 = date;
                  return obj;
                });
                // 2. 结果集应按日期正序排好序
                result = result.sort((a, b) => {
                  return a.p1.getTime() - b.p1.getTime();
                })
                // 3. 修正结果数据类型问题
                const values = (result || []).map(obj => {
                  return testTable.columns.map(col => {
                    if (col.dataType === DataType.INTEGER) {
                      return parseInt(obj[col.columnName]);
                    } else if (col.dataType === DataType.DOUBLE) {
                      return parseFloat(obj[col.columnName]);
                    } else {
                      return obj[col.columnName];
                    }
                  });
                })
                return Promise.resolve({
                  columns: testTable.columns,
                  values: values,
                });
              })
              // return Promise.resolve(testDataSet);
            }
            return Promise.resolve(null)
            }
          }
        }
      },
      requirements: [WellLogRenderer]
    }
  )
})

onUnmounted(() => {
  wellLogRef && wellLogRef.destroy()
})
const show = ref(true)


const onScaleChange = (event) => {
  if (!wellLogModel) return;
  scaleSettingRef.value = event.value;
  wellLogModel.set('settings.plottingScale', {...event.value});
}
const onShowParamsChange = (event) => {
  show.value = event.value;
}
const onExport = (event) => {
  if (!wellLogModel) return;
  console.log(wellLogModel.wellLog);
}
const onResetZoom = (event) => {
  if (!wellLogModel) return;
  scaleSettingRef.value = {...defaultWellLogScale};
  wellLogModel.set('settings.plottingScale', {...defaultWellLogScale});
}
const onViewSettingChange = (event) => {
  if (!wellLogModel) return;
  const setting = event.value;
  viewSettingRef.value = setting;
  wellLogModel.set('settings.fitWindow', setting.fitWindow);
  wellLogModel.set('settings.autoRefresh', setting.autoRefresh);
  wellLogModel.set('settings.hideMouseCrosshair', !setting.mouseCrosshair);
  wellLogModel.set('settings.hideMouseTooltip', !setting.mouseTooltip);
  wellLogModel.set('settings.showHeader', setting.showHeader);
  wellLogModel.set('settings.autoScrolling', setting.autoScrolling);
}
const closeTool=()=>{
  closeTools.value = !closeTools.value
}
</script>

<style lang="scss">
@import '@/styles/variables.scss';

.ui-zhrtc-page * {
  box-sizing: border-box;
}

.ui-zhrtc-page {
  position: absolute;
  top: 40px;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 92px 0 0px 0px;
  .ui-zhrtc-toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-bottom: solid 1px $blackLight;
  }
  .ui-zhrtc-body {
    position: relative;
    width: 100%;
    height: 100%;
    .ui-zhrtc-vis {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 800px;
      transition: transitionNormal(right);
      .ne-wlr {
        position: relative;
        width: 100%;
        height: 100%;
        .ne-wlr-tracks {
          position: relative;
          width: 100%;
          height: 100%;
          overflow: auto;
          white-space: nowrap;
          & > .ne-wltr {
            white-space: initial;
          }
        }
      }
    }
    .ui-zhrtc-runtime {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 760px;
      transition: transitionNormal(width);
    }
  }
}
.card {
  display: flex;
  height: 300px;
  flex: 1;
  font-weight: bold;
  background: #ffffe1;
}
.line {
  height: 100px;
  text-align: center;
  line-height: 50px;
}
.fouLine {
  height: 75px;
  text-align: center;
  line-height: 37px;
}
.seLine {
  border: 2px solid #333;
  border-left: none;
  padding: 100px 0px;
  text-align: center;
  line-height: 25px;
  width: 20%;
}
.thiLine {
  border: 2px solid #333;
  border-left: none;
  width: 20%;
}
.echart {
  height: 500px;
  width: 100%;
  display: flex;
}
.list {
  width: 20%;
  height: 100%;
  border: 2px solid #333;
  border-top: none;
}
.lists {
  width: 20%;
  height: 100%;
  border: 2px solid #333;
  border-top: none;
  border-left: none;
}
#Echarts {
  height: 100%;
  width: 100%;
}
.triangle {
  position: absolute;
  left: 0;
  top: 50%;
  margin: auto;
  width: 0;
  height: 0;
  border-bottom: 10px solid transparent;
  border-right: 20px solid #dedede;
  border-top: 10px solid transparent;
}
.triangles {
  position: absolute;
  left: 0;
  top: 50%;
  margin: auto;
  width: 0;
  height: 0;
  border-bottom: 10px solid transparent;
  border-left: 20px solid #dedede;
  border-top: 10px solid transparent;
}
// ::-webkit-scrollbar {
//   display: none; /* Chrome, Safari, Opera*/
// }
#main {
  height: 400px;
  width: 94%;
}
#main2 {
  height: 400px;
  width: 94%;
}
.ui-zhrtc-toolbar-right {
  position: absolute;
  right: 0px;
  top: 0px;
  z-index:999
}
</style>